<template>
  <van-tabs background="#99d99d" color="#ff8700" title-active-color="#ff8700">
    <van-tab v-for="foodCate in foodCateList" :key="foodCate.id">
      <template #title>
        <i class="iconfont" v-bind:class="[foodCate.face]">
          <span class="title-name">{{ foodCate.name }}</span>
        </i>
      </template>

      <menu-card :foodCate="foodCate.id" />
    </van-tab>
  </van-tabs>
</template>

<script>
import menuCard from "./menuCard.vue";
import { getFoodCateByLocal } from "@/api/food";
export default {
  components: { menuCard },
  name: "FoodCate",

  props: {
    localCate: {
      type: Number,
    },
  },

  data() {
    return {
      foodCateList: [], //菜的分类信息
    };
  },

  mounted() {
    this.getFoodCateByLocal();
  },

  methods: {
    /**
     * 根据地域id获取菜的分类信息
     */
    getFoodCateByLocal() {
      let params = {
        localId: this.localCate,
      };

      getFoodCateByLocal(params).then((res) => {
        this.foodCateList = res.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.title-name {
  font-size: 15px;
  padding-left: 5px;
}
</style>